App.require(function () {
    var app = App.getCurrent();

    app.defineComponent("str-uploader-container", {
        getDomObj: function () {
            this.attachDom('[role="uploadercontainer"]', "uploadedContainer")
                .attachDom(".progress-container", "progressContainer")
                .attachDom("svg", "svg")
                .attachEvent("uploadedContainer", "scroll", this.scrollHandler, false);
        },
        get scrollTop() {
            return this.domList.uploadedContainer.scrollTop;
        },
        set scrollTop (value) {
            this.domList.uploadedContainer.scrollTop = value;
        },
        init: function () {
            this.data.isEnd = false;
        },
        setEnded: function (html, data) {
            var that = this;
            var range = document.createRange();
            range.setStartAfter(this.domList.progressContainer);
            range.setEndBefore(this.domList.uploadedContainer);
            range.deleteContents();
            range.detach();
            this.appendHTML(html, function () {
                that.data.isEnd = true;
                that.hiddenLoading();
            }, "afterbegin", data)
        },
        removeEnded: function () {
            var components = this.components, container = this.domList.progressContainer;
            for (var i = components.length - 1; i >= 0; i--) {
                var component = components[i];
                if (container.contains(component.nodes[0]) && component.tagName !== "str-progress") this.removeComponent(components[i]);
            }
            var range = document.createRange();
            range.setStart(container.firstChild, 0);
            range.setEnd(this.domList.svg, 0);
            range.deleteContents();
            range.detach();
            this.data.isEnd = false;
        },
        setHTML: function (html, feeback) {
            var components = this.components, container = this.domList.uploadedContainer;
            for (var i = components.length - 1; i >= 0; i--) {
                var component = components[i];
                if (component.tagName !== "str-progress") this.removeComponent(components[i]);
            }
            var range = document.createRange();
            range.setStart(container, 0);
            range.setEnd(this.domList.progressContainer, 0);
            range.deleteContents();
            range.detach();
            this.insertAdjacentHTML(container, html, "afterbegin", feeback);
        },
        appendHTML: function (html, feeback, position, data) {
            position = position || "beforebegin";
            var dom = this.domList.progressContainer;
            this.insertAdjacentHTML(dom, html, position, feeback, data);
        },
        render: function (next) {
            this.computeData();
            this.fetch("./index.html", function (text) {
                return next(this.renderHTML(text));
            })
        },
        computeData: function () {
            var property = this.property;
            property.type = property.type || "";
            property.class = property.class || "";
            this.data.propertystr = this.createPropertyStr();
        },
        scrollHandler: function (ev) {
            if (this.data.isLoading || this.data.isEnd) return;
            var target = ev.target;
            if (target.scrollTop + target.clientHeight > target.scrollHeight - 40) {
                this.dispatchCustomEvent("loadershow", { component: this });
                this.showLoading();
            }
        },
        showLoading: function () {
            var container = this.domList.uploadedContainer;
            container.classList.add("show-loading");
            this.data.isLoading = true;
        },
        hiddenLoading: function () {
            var container = this.domList.uploadedContainer;
            container.classList.remove("show-loading");
            this.data.isLoading = false;
        },
        get className() {
            return this.property.class;
        },
        set className(value) {
            if (this.property.class == value) return;
            this.domList.uploadedContainer.className = value;
            this.property.class = value;
        }
    });
});